<template>
	<view class="carts">
		<view class="carts-header">
			<view class="carts-zbsc">
				<view class="carts-zbsc-item">
					<uni-icons type="checkbox" color="#666666"></uni-icons>
					<text>100%正品保证</text>
				</view>
				<view class="carts-zbsc-item">
					<uni-icons type="checkbox" color="#666666"></uni-icons>
					<text>售后无忧</text>
				</view>
			</view>
			<view class="carts-top">
				<view class="carts-top-shopnum">购物数量：<text>{{cartStore.cartTotalAllCount}}</text></view>
				<view class="carts-top-edit" @click="handleEdit">编辑</view>
			</view>
		</view>
		<view class="carts-ls">
			<view class="carts-noshops" v-if="cartStore.cartlist.length===0">
				<view class="carts-noshops-img">
					<image src="../../static/noshop.png" mode="widthFix"></image>
				</view>
				<navigator class="carts-noshops-go" url="/pages/pros/pros" open-type="switchTab">去逛逛</navigator>
			</view>
			<!-- 购物车组 -->
			<view class="cart-item" v-for="(item,index) in cartStore.cartlist" :key="index">
				<view class="cart-item-check" @click="handleCartCheck(item.id)">
					<uni-icons :type="item.checked?'checkbox-filled':'circle'" size="28" color="#00922a"></uni-icons>
				</view>
				<navigator :url="`../proinfo/proinfo?id=${item.id}`" hover-class="none" class="cart-item-img">
					<view class="jximgbox">
						<view class="jxstips">{{item.Class}}</view>
						<image class="jximg" :src="item.PicFiles" mode="aspectFill"></image>
					</view>
					<view class="cart-zjj">总价 {{Number(item.Price*item.count).toFixed(2)}}</view>
				</navigator>
				<view class="cart-item-right">
					<navigator :url="`../proinfo/proinfo?id=${item.id}`" hover-class="none">
						<view class="jxtitle">{{item.Titles}}</view>
						<view class="jxspcc">包装规格：{{item.spcc}}</view>
						<view class="jxer">本产品非质量问题不退/换</view>
						<view class="cart-item-right-sl">
							<text>500件起购，以50的整数倍下单</text>
						</view>
					</navigator>
					<view class="cart-item-right-bot">
						<view class="cart-item-right-bot-l">
							<view class="jxprice" v-if="isLogin">￥{{Number(item.Price).toFixed(2)}}</view>
							<view class="jxlogin" v-else>￥认证后可见</view>
						</view>
						<view class="shopctrl">
							<view class="shopctrl-l" @click="handleReduce(item.id,item.Step)">-</view>
							<view class="shopctrl-c"><input disabled class="shopctrl-int" type="text" :value="item.count" /></view>
							<view class="shopctrl-l" @click="handleIncrease(item.id,item.Step)">+</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 购物车组结束 -->
		</view>
		<view class="carts-bot">
			<view class="carts-bot-allcheck" @click="handleAllCheck">
				<uni-icons :type="cartStore.isAllchecked?'checkbox-filled':'circle'" size="28" color="#00922a"></uni-icons>
				<text>全选({{cartStore.cartTotalCount}})</text>
			</view>
			<view class="carts-bot-right" v-if="!edit">
				<view class="carts-bot-price"><text>{{cartStore.cartTotalPrice}}</text></view>
				<view class="carts-bot-ok" :class="{gopay:cartStore.cartTotalCount>0}" @click="handleGopay">去结算</view>
			</view>
			<view class="carts-bot-right" v-else>
				<view class="carts-bot-delete" @click="handleDeleteChecked">删除</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		useCartStore
	} from '@/store/index'
	const cartStore = useCartStore();
	const isLogin = true;
	//减
	const handleReduce = (goodid, step) => {
		cartStore.changeCartItem({
			good: {
				id: goodid
			},
			num: -1 * step
		})
	}
	//加
	const handleIncrease = (goodid, step) => {
		cartStore.changeCartItem({
			good: {
				id: goodid
			},
			num: 1 * step
		})
	}
	//全选
	const handleAllCheck = () => {
		cartStore.allChecked(!cartStore.isAllchecked)
	}
	//单选
	const handleCartCheck = (goodid) => {
		cartStore.itemChecked(goodid);
	}
	//编辑
	const edit = ref(false);
	const handleEdit = () => {
		edit.value = !edit.value;
	}
	//删除选中
	const handleDeleteChecked = () => {
		cartStore.deleteCart()
	}
	//去结算
	const handleGopay = () => {
		if (cartStore.cartTotalCount == 0) return;
		uni.navigateTo({
			url: '../place/place'
		});
	}
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.carts {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		&-header {
			flex-shrink: 0;
			border-bottom: 10rpx solid #f3f3f3;
		}

		&-zbsc {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 10rpx solid #f3f3f3;
			background: $cf;

			&-item {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: $c6;
				grid-gap: 0 5rpx;
			}
		}

		&-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background: $cf;

			&-edit {
				font-size: 24rpx;
				color: $c0;
				padding: 5rpx 20rpx;
				border: 1px solid #b7b7b7;
			}

			&-shopnum {
				color: $c0;

				text {
					color: $main-color;
				}
			}
		}

		&-ls {
			flex: 1;
			overflow-y: auto;

			.carts-noshops {
				padding-top: 120rpx;

				&-img {
					padding-bottom: 80rpx;

					image {
						width: 300rpx;
						display: block;
						margin: 0 auto;
					}
				}

				&-go {
					font-size: 36rpx;
					color: #fff;
					background: #DD0326;
					padding: 5px 0;
					width: 200rpx;
					text-align: center;
					border-radius: 1000px;
					margin: 0 auto;
				}
			}

		}

		&-bot {
			height: 100rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: $cf;
			border-top: 1px solid #f3f3f3;

			&-allcheck {
				display: flex;
				align-items: center;
				padding-left: 20rpx;
			}

			&-right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 20rpx;
			}

			&-price {
				font-size: 36rpx;
				color: $red;
				font-weight: bold;

				text {
					&::before {
						content: "￥";
					}
				}
			}

			&-ok {
				padding: 15rpx 40rpx;
				background: #999;
				color: #fff;
				margin-left: 10px;
				border-radius: 5px;

				&.gopay {
					background: $main-color;
				}
			}

			&-delete {
				padding: 10rpx 30rpx;
				border: 1px solid $red;
				color: $red;
				margin-left: 10px;
				border-radius: 5px;
			}
		}
	}

	// 购物车item
	.cart-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 10rpx solid #f3f3f3;
		background: $cf;

		&-check {
			flex-shrink: 0;
			margin-right: 2px;
			margin-top: 30rpx;
		}

		&-img {
			flex-shrink: 0;
			width: 230rpx;
			margin-right: 20rpx;

			.jximgbox {
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
			}
		}

		&-right {
			flex: 1;
			padding-right: 20rpx;
			overflow: hidden;

			&-sl {

				view,
				text {
					display: inline-block;
					vertical-align: middle;
					font-size: 26rpx;
					color: $c9;
				}

				text {
					color: #20b3fb;
				}
			}

			&-bot {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 15rpx;
			}
		}
	}

	.cart-zjj {
		margin-top: 18rpx;
		font-size: 24rpx;
		color: $red;
	}
</style>